<html>
<head>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<!-- <script type="text/javascript" src="/WEB-INF/JavaScript/jquery-1.7.1.js"></script>
 -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="../JavaScript/common.js"></script>
<script type="text/javascript" src="../JavaScript/commonValidation.js"></script>
<script type="text/javascript" src="../JavaScript/dropdown.js"></script>
<link href='http://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet' type='text/css'>
</head>
<body>
	<h1 class="header" align="center" width="100%"><u>Driver Details</u></h1>
	<form class="form-style-1"  modelAttribute="driver">
		<div width="100%" align="center" style="padding-top: 30px;padding-botom:30px">
			<table border="0" width="80%" >
				<tr>
					<td style="vertical-align: top" align="right"><label>First Name :</label></td>
					<td align="left"><input type="Text" name=driverId' id="firstName" maxlength="15" size="15" /></td>
					<td style="vertical-align: top" align="right"><label>Last Name :</label></td>
					<td align="left"><input type="Text" name=driverId' id="lastName" maxlength="15" size="15" /></td>
					<td style="vertical-align: top" align="right"><label>Licence Number :</label></td>
					<td align="left"><input type="Text" name=driverLNo' id="srchLicenseNumber" maxlength="15" size="15" /></td>
					<td style="vertical-align: top" align="right"><label>Phone Number :</label></td>
					<td align="left"><input type="Text" name='driverPhnNo' id="srchPhoneNumber" maxlength="15" size="15" autocomplete="off" onkeypress="return common.isNumber(event)"/></td>
					<td align=""><input type="button" value="Search" id="search" /></td>
					<td align=""><input type="reset" value="reset" />
					</td>
				</tr>
			</table>
		</div>
	</form>
	<form >
		<div width="100%" align="center" >
			<div align="center"  id='driverDiv' style="width:81%;padding-top:0px;border:0px solid red;overflow:auto;" scrollHeight="100">
				<table border="0" width="99%" id="driverDtl">			
					<thead>
						<tr>
							<th style='display:none'></th>
							<th width="25%" align="center">First Name</th>
							<th width="25%" align="center">Last Number</th>
							<th width="25%" align="center">License Number</th>
							<th width="25%" align="center">Phone Number</th>
						</tr>
					</thead>
					<tbody>
						<tr id="dummy"><td colspan="4" align="center"  style="color:blue">---  No Data Present   ---</td></tr>
					</tbody>
				</table>			
			</div>
		</div>
		<div width="100%" align="center">
			<table  width="80%" style="border:0px">
				<tr>
					<td colspan="5" align="right">
						<input type="button" value="Add New" id="addNew" /> 
						<input type="button" value="Save" id="save"/>
						<c:out value="${driver.driverId}"/>
					</td>
				</tr>
			</table>
		</div>
	</form>
</body>
<script>
	$( document ).ready(function() {
		search();
		$("#search").click(function() {
			search();
		});
		
		function search(){
			var firstName = $('#firstName').val();
			var drivingLicenseNumber=$('#srchLicenseNumber').val();
			var phoneNumber = $('#srchPhoneNumber').val();
			var lastName=$('#lastName').val();
			//alert("json"+json);
			 // console.log(json);
			 var json={"firstName":firstName,"lastName":lastName,"drivingLicenseNumber":drivingLicenseNumber,"phoneNumber":phoneNumber};
			   $.ajax({
				    url: "/cabplanning-service/driver",
				    type: "POST",
				    data: JSON.stringify(json),
				    contentType: "application/json; charset=utf-8",
				    beforeSend:function(xhr){
				    	xhr.setRequestHeader("Accept","application/json");
				    	xhr.setRequestHeader("Content-Type","application/json");
				    },
				    success: function (msg) {
				    	 if (msg) {
				    		 buildHtmlTable(msg)
			               } else {
			                  alert("Something went wrong !!!");
			            }
				    }
				    
				}); 
		}
		
		$("#addNew").click(function() {
			$("#dummy").remove();
			$('#driverDtl tr').length>11?$("#driverDiv").css({"height":"500"}):null;			
				$('#driverDtl > tbody').append("<tr>"
			+ "<td style='display:none' ><input type='hidden' name='driverId'></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' onkeypress='return common.isNumber(event)' autocomplete='off'/></td>"
			+ "</tr>").slideDown("slow");
		});	
		 var headers = ['driverId','firstName','lastName','drivingLicenseNumber','phoneNumber'];
		 var ColName = ['','First Name','Last Name','Driver License Number','Phone Number'];
		 
		 var json = {"list": [
		                  ]
		              };
		 
		 

		// Builds the HTML Table out of myList.
		function buildHtmlTable(json) {			//alert(json);
			$("#driverDtl").empty();
		    $("#driverDtl").append('<thead><tr><th style="display:none"></th><th width="25%" align="center">First Name</th><th width="25%" align="center">Last Name</th><th width="25%" align="center">Driver Licence Number</th><th width="25%" align="center">Phone Number</th></tr></thead><tbody>');
		    myList = json;	
		    if(myList.length==0){
		    	$("#driverDtl").append('<tr id="dummy"><td colspan="4" align="center"  style="color:blue">---  No Data Present   ---</td></tr>')
		    }
		    else{
			    for (var i = 0 ; i < myList.length ; i++) {
			        var row$ = $('<tr/>');
			        var isNewRecord = true;
			        for (var colIndex = 0 ; colIndex < headers.length ; colIndex++) {
			            var cellValue = myList[i][headers[colIndex]];
	
			            if (cellValue == null) { cellValue = ""; }
			            if(colIndex==0){						// Driver Id as hidden field
			            	row$.append($('<td align="center" style="display:none">').append($("<input type='hidden' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
			            	if(cellValue!= "") {isNewRecord = false;} // Driver Id is not null/"" then it is old record
			            }
						else{
							if(!isNewRecord && colIndex!=4)		// not new record and not phone number disable it
			            		row$.append($('<td align="center">').append($("<input type='Text' disabled maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
							else{
								if (colIndex == 4)
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' onkeypress='return common.isNumber(event)'/>").val(cellValue)));
								else							
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));	
							}
						}	
			            $("#driverDtl").append(row$);
			        }
			    }
		    }
		}
		//buildHtmlTable(json);
		 
		function tableToJson(table) {
		    var data = [];
			//alert(table.rows.length);
			if(table.rows.length == 2 && document.getElementById('dummy')){
				//alert("Nothing to Save");
				return false;
			}
			
		    for (var i=1; i<table.rows.length; i++) {
		        var tableRow = table.rows[i];
		        var rowData = {};
		        for (var j=0; j<tableRow.cells.length; j++) {
		        	//alert(j);
		        	 var value = tableRow.cells[j].getElementsByTagName('input')[0].value;
		        	 if(j!=0 && (!value || value=="")){
		        		 alert("Please Enter "+ ColName[j]);
		        		 return false;
		        	  }
		            rowData[ headers[j] ] = tableRow.cells[j].getElementsByTagName('input')[0].value;	
		        }
		        data.push(rowData);
		    }
		     //alert(JSON.stringify(data))
		     return data;
		}
		
		$("#save").click(function() {
			var json = tableToJson(document.getElementById('driverDtl'));
			  console.log(json); 
			  if(!json) return;
			   $.ajax({
				    url: "/cabplanning-service/savedriver",
				    type: "POST",
				    data: JSON.stringify(json),
				    contentType: "application/json",
				    datatype:"json",
				    success: function (msg) {
				    	 if (msg) {
				    		 buildHtmlTable(msg);
			               } else {
			                  alert("Something went wrong !!!");
			            }
				    }
				    
				}); 
		});

	});
	
	
	
</script>
</html>